# HTML5 Chart for ASP.NET Web Forms with ShieldUI Chart

Technologies
ASP.NET, ASP.NET Web Forms, HTML5/JavaScript
Topics
data visualization
Platforms
Desktop, Web
Requirements
Primary language
en-US
Last updated
8/25/2013
License
MS-LPL
View this sample online

# Introduction

In this article, we tackle a common data visualization task – creating a sales dashboard. A sales dashboard is widely used in business presentations, to outline key performance indicators for a given business process or objective. Key to any such presentation is the good visualization of the data, as well as the polished appearance. To achieve the task a hand, I am using related chart components, which offer all of the required functionality.
The setup uses three server side components, which allow selection. Upon selecting a value from a given parent chart, its related controls are updated accordingly. Each chart is wrapped in an update panel, to allow smooth updates. Each selection triggers server-side events, which allows passing different values for each chart, depending on the master-control selection. The finished application looks like this:

# Building the Sample

The sample contains all the necessary code - simply download it, unzip it and run it to view the layout.

Description

The sample uses a server-side ASP.NET wrapper for a HTML5 chart component, which brings the speed and flexibility of client side performance to the comfort of Microsoft Visual Studio development environment. The first control is easily populated in code behind:

C#
Edit|Remove
csharp

     protected void ShieldChart1_TakeDataSource(object sender, Shield.Web.UI.ChartTakeDataSourceEventArgs e)
            {
                ShieldChart1.DataSource = new object[]
                {
                    new {Quarter = "Q1", Sales = 312 },
                    new {Quarter = "Q2", Sales = 212 },
                    new {Quarter = "Q3", Sales = 322 },
                    new {Quarter = "Q4", Sales = 128 }
                };
            }

     protected void ShieldChart1_TakeDataSource(object sender, Shield.Web.UI.ChartTakeDataSourceEventArgs e)
            {
                ShieldChart1.DataSource = new object[]
                {
                    new {Quarter = "Q1", Sales = 312 },
                    new {Quarter = "Q2", Sales = 212 },
                    new {Quarter = "Q3", Sales = 322 },
                    new {Quarter = "Q4", Sales = 128 }
                };
            }

The declaration of the first control itself is straightforward and looks like this:

C#
Edit|Remove
csharp

    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                        <ContentTemplate>
                            <shield:ShieldChart ID="ShieldChart1" runat="server" AutoPostBack="true" OnSelectionChanged="ShieldChart1_SelectionChanged" Width="320px" Height="330px"
                                OnTakeDataSource="ShieldChart1_TakeDataSource">
                                <PrimaryHeader Text="Quarterly Sales">
                                </PrimaryHeader>
                                <ExportOptions AllowExportToImage="false" AllowPrint="false" />
                                <TooltipSettings CustomPointText="Sales Volume: <b>{point.y}</b>">
                                </TooltipSettings>
                                <Axes>
                                    <shield:ChartAxisX CategoricalValuesField="Quarter">
                                    </shield:ChartAxisX>
                                    <shield:ChartAxisY>
                                        <Title Text="Quarter Overview"></Title>
                                    </shield:ChartAxisY>
                                </Axes>
                                <DataSeries>
                                    <shield:ChartBarSeries DataFieldY="Sales">
                                        <Settings EnablePointSelection="true" EnableAnimation="true">
                                            <DataPointText BorderWidth="">
                                            </DataPointText>
                                        </Settings>
                                    </shield:ChartBarSeries>
                                </DataSeries>
                                <Legend Align="Center" BorderWidth=""></Legend>
                            </shield:ShieldChart>
                        </ContentTemplate>
                    </asp:UpdatePanel>

    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                        <ContentTemplate>
                            <shield:ShieldChart ID="ShieldChart1" runat="server" AutoPostBack="true" OnSelectionChanged="ShieldChart1_SelectionChanged" Width="320px" Height="330px"
                                OnTakeDataSource="ShieldChart1_TakeDataSource">
                                <PrimaryHeader Text="Quarterly Sales">
                                </PrimaryHeader>
                                <ExportOptions AllowExportToImage="false" AllowPrint="false" />
                                <TooltipSettings CustomPointText="Sales Volume: <b>{point.y}</b>">
                                </TooltipSettings>
                                <Axes>
                                    <shield:ChartAxisX CategoricalValuesField="Quarter">
                                    </shield:ChartAxisX>
                                    <shield:ChartAxisY>
                                        <Title Text="Quarter Overview"></Title>
                                    </shield:ChartAxisY>
                                </Axes>
                                <DataSeries>
                                    <shield:ChartBarSeries DataFieldY="Sales">
                                        <Settings EnablePointSelection="true" EnableAnimation="true">
                                            <DataPointText BorderWidth="">
                                            </DataPointText>
                                        </Settings>
                                    </shield:ChartBarSeries>
                                </DataSeries>
                                <Legend Align="Center" BorderWidth=""></Legend>
                            </shield:ShieldChart>
                        </ContentTemplate>
                    </asp:UpdatePanel>

The other controls are identical, each one of them populated and re-populated in the TakeDataSource evant handler, taking into account the selections made in the parent charts.
For more information on the controls used, please visit ShieldUI site.